<template>
  <div>
    <!-- Main content -->
    <section class='content'>
      <div class='row'>
        <div class='col-xs-12'>
          <div class='box box-solid'>
            <button class='btn btn-info'>衣布到位</button>
            <button class='btn btn-default'>定制宝</button>
            <button class='btn btn-success' style='float:right' @click='display_time'>时间段选择</button>
          </div>
          <div class='row' v-show='vshow'>
            <div class='col-md-12'>
              <div class='margin-bottom' style='text-align: right;'>
                <span>起始：</span><input class='datepicker start' data-date-format='yyyy-mm-dd' style='margin-right: 50px;'></input>
                <span>终止：</span><input class='datepicker end' data-date-format='yyyy-mm-dd'></input>
              </div>
            </div>
          </div>
          <div class='box'>
            <div class='box-header'>
              <h3 class='box-title'>机型统计</h3>
            </div>
            <!-- /.box-header -->
            <div class='box-body'>
              <table id='example1' class='table table-bordered table-hover'>
                <thead>
                <tr>
                  <th>机型</th>
                  <th>新增用户</th>
                  <th>新增占比(%)</th>
                  <th>活跃用户</th>
                  <th>活跃用户占比(%)</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
                <tfoot>
                </tfoot>
              </table>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
          <div class='box'>
            <div class='box-header'>
              <h3 class='box-title'>操作系统占比</h3>
            </div>
            <!-- /.box-header -->
            <div class='box-body'>
              <table id='example2' class='table table-bordered table-hover'>
                <thead>
                <tr>
                  <th>操作系统</th>
                  <th>新增用户</th>
                  <th>新增占比(%)</th>
                  <th>活跃用户</th>
                  <th>活跃用户占比(%)</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
                <tfoot>
                </tfoot>
              </table>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
          <div class='box'>
            <div class='box-header'>
              <h3 class='box-title'>分辨率占比</h3>
            </div>
            <!-- /.box-header -->
            <div class='box-body'>
              <table id='example3' class='table table-bordered table-hover'>
                <thead>
                <tr>
                  <th>分辨率</th>
                  <th>新增用户</th>
                  <th>新增占比(%)</th>
                  <th>活跃用户</th>
                  <th>活跃用户占比(%)</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
                <tfoot>
                </tfoot>
              </table>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
          <div class='box'>
            <div class='box-header'>
              <h3 class='box-title'>联网占比</h3>
            </div>
            <!-- /.box-header -->
            <div class='box-body'>
              <table id='example4' class='table table-bordered table-hover'>
                <thead>
                <tr>
                  <th>网络</th>
                  <th>新增用户</th>
                  <th>新增占比(%)</th>
                  <th>活跃用户</th>
                  <th>活跃用户占比(%)</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
                <tfoot>
                </tfoot>
              </table>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
          <div class='box'>
            <div class='box-header'>
              <h3 class='box-title'>运营商占比</h3>
            </div>
            <!-- /.box-header -->
            <div class='box-body'>
              <table id='example5' class='table table-bordered table-hover'>
                <thead>
                <tr>
                  <th>运营商</th>
                  <th>新增用户</th>
                  <th>新增占比(%)</th>
                  <th>活跃用户</th>
                  <th>活跃用户占比(%)</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
                <tfoot>
                </tfoot>
              </table>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
          <div class='box'>
            <div class='box-header'>
              <h3 class='box-title'>应用版本占比</h3>
            </div>
            <!-- /.box-header -->
            <div class='box-body'>
              <table id='example6' class='table table-bordered table-hover'>
                <thead>
                <tr>
                  <th>应用版本</th>
                  <th>新增用户</th>
                  <th>新增占比(%)</th>
                  <th>活跃用户</th>
                  <th>活跃用户占比(%)</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
                <tfoot>
                </tfoot>
              </table>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
          <div class='box'>
            <div class='box-header'>
              <h3 class='box-title'>地域分布占比</h3>
            </div>
            <!-- /.box-header -->
            <div class='box-body'>
              <table id='example7' class='table table-bordered table-hover'>
                <thead>
                <tr>
                  <th>地域</th>
                  <th>新增用户</th>
                  <th>新增占比(%)</th>
                  <th>活跃用户</th>
                  <th>活跃用户占比(%)</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
                <tfoot>
                </tfoot>
              </table>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>
  </div>
</template>
<script>
  import $ from 'jquery'
  import 'datatables.net'
  import 'datatables.net-bs'
  import 'bootstrap-datepicker'
  import config from '../../config'

  export default {
    name: 'order_attri',
    data: function () {
      return {
        vshow: false,
        table: []
      }
    },
    methods: {
      query: function () {
        var time = {}
        if ($('input.start').val() === '' && $('input.start').val() === '') {
          time = null
        } else {
          time.start = $('input.start').val()
          time.end = $('input.end').val()
        }

        this.getdata(time)
      },
      display_time: function () {
        this.vshow = !this.vshow
      },
      area: function () {
        this.vshow1 = !this.vshow1
      },
      getdata: function (time) {
        var $this0 = this
        var params = {}
        if (time != null) {
          params.start = time.start
          params.end = time.end
        }
        $.ajax({
          type: 'POST',
          url: config.serverURI + '/demo/app/dev',
          data: JSON.stringify(params),
          'headers': {
            'content-type': 'application/json'
          },
          dataType: 'json',
          success: function (data) {
            $this0.table[0].clear()
            data.deviceModel.forEach(function (item, key) {
              $this0.table[0].row.add([item.key, item.doc_count, item.doc_count * 100.0 / data.totalCount, '', ''])
            })
            $this0.table[1].clear()
            data.clientType.forEach(function (item, key) {
              $this0.table[1].row.add([item.key === 1 ? 'Android' : 'iOS', item.doc_count, item.doc_count * 100.0 / data.totalCount, '', ''])
            })
            $this0.table[2].clear()
            $this0.table[3].clear()
            data.network.forEach(function (item, key) {
              $this0.table[3].row.add([item.key, item.doc_count, item.doc_count * 100.0 / data.totalCount, '', ''])
            })
            $this0.table[4].clear()
            $this0.table[5].clear()
            data.clientVersion.forEach(function (item, key) {
              $this0.table[5].row.add([item.key, item.doc_count, item.doc_count * 100.0 / data.totalCount, '', ''])
            })

            for (var index = 0; index < 7; ++index) {
              $this0.table[index].columns.adjust().draw()
            }
          }
        })
      }
    },
    mounted () {
      var $this0 = this
      this.$nextTick(() => {
        $.fn.datepicker.dates['zh-CN'] = {
          days: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
          daysShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          daysMin: ['日', '一', '二', '三', '四', '五', '六', '日'],
          months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
          monthsShort: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
          today: '今日',
          format: 'yyyy年mm月dd日',
          weekStart: 1
        }

        $('.datepicker').datepicker({
          language: 'zh-CN',
          showOnFocus: true
        }).on('changeDate', function () {
          $this0.query()
        })

        $.ajax({
          type: 'GET',
          url: config.serverURI + '/demo/order/times',
          data: '',
          'headers': {
            'content-type': 'application/json'
          },
          dataType: 'json',
          success: function (data) {
            $('input.start').datepicker('update', data.start)
            $('input.end').datepicker('update', data.end)
          }
        })

        $this0.query()

        for (var index = 1; index < 8; ++index) {
          $this0.table.push($('#example' + index).DataTable({
            'paging': false,
            'lengthChange': false,
            'searching': false,
            'ordering': false,
            'info': false,
            'autoWidth': true
          }))
        }
      })
    }
  }
</script>

<style>
@import url('/static/plugins/datatables/dataTables.bootstrap.css');

table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
  font-family: 'FontAwesome';
}

table.dataTable thead .sorting:after {
  content: '\f0dc';
}

table.dataTable thead .sorting_asc:after {
  content: '\f0dd';
}

table.dataTable thead .sorting_desc:after {
  content: '\f0de';
}
</style>
